<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>CreditAmountRecheck</title>
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap-table.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/vendor/metisMenu/metisMenu.min.js}"></script>
    <script th:src="@{/dist/js/sb-admin-2.js}"></script>
    <script th:src="@{/vendor/datepicker/bootstrap-datepicker.js}"></script>
    <link href="/vendor/bootstrap/css/bootstrap-table.css" rel="stylesheet">
    <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
    <link href="/dist/css/sb-admin-2.css" rel="stylesheet">
    <link href="/vendor/datepicker/datepicker3.css" rel="stylesheet">
    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link th:href="@{/vendor/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

    <style>
        /*body*/

        #parentBody {
            border: 1px solid #DDDDDD;
        }

        /*divide*/
        #leftWindow {
            width: 29%;
            float: left;
            /*border: 1px solid #DDDDDD;*/
            height: 670px;
        }

        #divideLine {
            width: 2%;
            height: 670px;
            padding-top: 0px;
            /*background-color: #0c0c0c;*/
            position: absolute;
            cursor: e-resize;
            z-index: 999;
        }

        #rightWindow {
            width: 69%;
            height: 670px;
            padding-top: 0px;
            float: right;
            z-index: 0;
        }

        #iframeMapping {
            width: 100%;
            height: 100%;
            /*width: 69%;*/
            /*height: 670px;*/
            /*padding-top: 0px;*/
            /*float: right;*/
            z-index: 1;
            /*border: 1px solid #DDDDDD;*/
        }

        /*searchArea*/
        #searchbar {
            /*transform: scale(0.9);*/
            /*-ms-transform: scale(0.9); !* IE 9 *!*/
            /*-moz-transform: scale(0.9); !* Firefox *!*/
            /*-webkit-transform: scale(0.9); !* Safari and Chrome *!*/
            /*-o-transform: scale(0.9); !* Opera *!*/
            /*position: absolute;*/
            width: auto;
            height: 670px;
            border: 1px solid #DDDDDD;
            left: 0px;
            top: 0px;
            font-size: 12px;
        }

        #searchInfo {
            float: left;
            /*border: 1px solid #DDDDDD;*/
            height: 42%;
            width: 100%;
        }

        #tableInfo {
            float: left;
            /*border: 1px solid #DDDDDD;*/
            height: 50%;
            width: 100%;
        }

        #mask {
            position: absolute;
            left: 0px;
            top: 0px;
            zIndex: 998;
            width: 100%;
            height: 100%;
            display: none;
            backgroundColor: #DDDDDD;
            filter: alpha(opacity:0);
        }

    </style>
</head>

<body style="overflow-y: scroll; overflow-x: scroll" onselectstart="return false">
<div id="parentBody">
    <!--<ul id="parentBody">-->
    <!--<li id="leftWindow">-->
    <div id="leftWindow">
        <div id="searchbar" class="resizeMe">
            <div id="searchInfo">
                <form name="searchInfo">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <ul id="myTab" class="nav nav-tabs">
                                    <li class="active">
                                        <a href="#collapseOne" data-toggle="collapse">
                                            额度审查复核
                                        </a>
                                    </li>
                                    <li><a href="javascript:void(0)" id="searchAction">查询</a></li>
                                </ul>
                                <!--<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">额度审查复核</a>-->
                                <!--<button type="button" style="float:inherit " class="btn btn-primary" onclick="search()">查询</button>-->
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                            <div class="panel-body">

                                <div class="row">
                                    <div class="col-lg-4">
                                        <label>开始日期：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input class="form-control pull-right datepicker" id="startDate">
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <label>结束日期：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input class="form-control pull-right datepicker" id="endDate">
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <label>客户号：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input id="obkgid" type="text" class="form-control">
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <label>贷款编码：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input id="refnum" type="text" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr/>
                </form>
            </div>

            <div id="tableInfo">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                               href="#collapseSearchResult">搜索记录</a>
                        </h4>
                    </div>
                    <div id="collapseSearchResult" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table id="historyTable">
                                <thead>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--</li>-->
    <label id="divideLine"></label>
    <!--<li id="rightWindow">-->
    <div id="rightWindow">
        <iframe id="iframeMapping" frameborder="0" src=""></iframe>

    </div>
    <!--</li>-->
    <div id="mask"></div>

</div>

<script>

    $(document).ready(function () {
        // 通过深入 Document 内部对 body 进行检测，获取窗口大小
//        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
//            var winWidth = document.documentElement.clientWidth;
//            var winHeight = $('#searchbar').height();
////            $("#parentBody").css({"height": winHeight, "width": parseInt(winWidth)});
//
//        }

        var Url = '/CreditAmountRecheck/Search?'
            + 'startDate=' + $('#startDate').val()
            + '&&endDate=' + $('#endDate').val()
            + '&&obkgid=' + $('#obkgid').val()
            + '&&refnum=' + $('#refnum').val();
        $('#historyTable').bootstrapTable({
            url: Url,         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",
            locale: 'zh-CN',                     //中文支持
            pagination: true,                   //是否分页
            sidePagination: 'server',           //指定服务器端分页
            pageNumber: 1,                      //初始化加载第一页，默认第一页
            pageSize: 5,                       //每页的记录行数（*）
            pageList: [5, 10, 15, 50, 100, 'ALL'],        //可供选择的每页的行数（*）
//            height: 256,
            strictSearch: true,                 //搜索
            showColumns: false,                  //是否显示所有的列按钮
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 1,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            uniqueId: "refnum",               //每一行的唯一标识，一般为主键列
            showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            queryParams: queryParams,//请求服务器时所传的参数
            responseHandler: responseHandler,//请求数据成功后，渲染表格前的方法
            onClickRow: onClickRow,
            columns: [{
                field: 'refnum',
                title: '贷款编码'
            }, {
                field: 'obkgid',
                title: '客户号'
            }, {
                field: 'obkglin',
                title: '额度号'
            }, {
                field: 'prdccy',
                title: '额度币种'
            }, {
                field: 'obkgamt',
                title: '占用金额'
            }]
        });
        //iframe 鼠标移动
//        var mouseX = 0; //鼠标位置X
//        var mouseY = 0; //鼠标位置Y
//        var offX = 0;
//        var offY = 0;
//        $(document).mousemove(function(e){
//            mouseX = e.pageX;
//            mouseY = e.pageY;
//            offX = e.screenX - e.pageX;
//            offY = e.screenY - e.pageY;
//        });
//        $('iframe').each(function() {
//            $(this.contentWindow.document.body).mousemove(function(e) {
//                mouseX = e.screenX - offX;
//                mouseY = e.screenY - offY;
//            });
//        });
//                界面拖动
        var clickX, leftOffset, inx;
        var dragging = false;
        var labBtn = $("#parentBody").find('label');
        var wrapWidth = $("#parentBody").width();
        var divideWidth = $("#divideLine").width();


        labBtn.bind('mousedown', function () {
                dragging = true;
                leftOffset = $("#parentBody").offset().left;
                inx = $(this).index('label');
                $("#mask").css("display", "block");
            }
        );


        document.onmousemove = function (e) {
            if (dragging) {
                clickX = e.pageX;
                if (clickX <= leftOffset + 300) {
                    //左边小于300+分割线
                    labBtn.eq(inx).prev().width('300px');
                    labBtn.eq(inx).css('left', 300 + 'px');
                    labBtn.eq(inx).next().width(wrapWidth - 300 - divideWidth + 'px');
                }
                else if (clickX >= leftOffset + wrapWidth - 300 - divideWidth) {
                    //右边小于300+分割线
                    labBtn.eq(inx).prev().width(wrapWidth - 300 - divideWidth + 'px');
                    labBtn.eq(inx).css('left', wrapWidth - 300 - divideWidth + 'px');
                    labBtn.eq(inx).next().width('300px');
                }
                else {
                    labBtn.eq(inx).prev().width(clickX - leftOffset + 'px');
                    labBtn.eq(inx).css('left', clickX - leftOffset + 'px');
                    labBtn.eq(inx).next().width(leftOffset + wrapWidth - clickX - divideWidth + 'px');
                }
            }
        };

        $(document).mouseup(function (e) {
            dragging = false;
            e.cancelBubble = true;
            $("#mask").css("display", "none");
        });
    });


    $('#startDate').datepicker({
        language: 'zh-CN',
        format: 'yyyymmdd',
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true,
        endDate: new Date()
    }).on('changeDate', function (e) {
        var startTime = e.date;
        $('#endDate').datepicker('setStartDate', startTime);
    });
    //结束时间：
    $('#endDate').datepicker({
        language: 'zh-CN',
        format: 'yyyymmdd',
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true,
        endDate: new Date()
    }).on('changeDate', function (e) {
        var endTime = e.date;
        $('#startDate').datepicker('setEndDate', endTime);
    });

    function search() {
        var Url = '/CreditAmountRecheck/Search?'
            + 'startDate=' + $('#startDate').val()
            + '&&endDate=' + $('#endDate').val()
            + '&&obkgid=' + $('#obkgid').val()
            + '&&refnum=' + $('#refnum').val();
        $('#historyTable').bootstrapTable("refresh", {url: Url});
    }

    $('#searchAction').click(function () {
        search();
    });

    //点击行事件
    function onClickRow(item, $element) {
        $('#iframeMapping').attr('src', "/CreditAmountRecheckPage?refnum=" + item.refnum);
    }

    //请求服务数据时所传参数
    function queryParams(params) {
        return {
            pageSize: params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
            pageIndex: params.offset / params.limit + 1, //当前页面,默认是上面设置的1(pageNumber)
        }
    }

    //请求成功方法
    function responseHandler(result) {
        var errCode = result.errCode;//在此做了错误代码的判断
        if (errCode != 0) {
            alert("错误代码" + errCode);
            return;
        }
        //如果没有错误则返回数据，渲染表格
        return {
            total: result.dataLength, //总页数,前面的key必须为"total"
            rows: result.rowDatas //行数据，前面的key要与之前设置的dataField的值一致.
        };
    };


</script>
</body>
</html>
